<template>
    <div class="search">
        <div class="search-container">
            <div class="brand-logo">
                <!-- <span>logo</span> -->
                <img :src="logo" alt="">
            </div>
            <div class="search-box">
                <img src="~assets/icons/search.png" alt="">
                <input type="search" placeholder="请输入您要查找的商品" v-model="searchContent" @focus="searchDetail($event)">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'search',
    data(){
        return {
            searchContent:'',
            logo:''
        }
    },
    methods:{
        getLogo(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.getLogo, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.logo = that.$api.URL+res.data.msg['image_url'];
                }
            })
        },
        searchDetail(ev){
            this.$router.push({path:'/search'});
        }
    },
    mounted(){
        this.getLogo();
    }
}
</script>

<style lang='less'>
@rem:100rem;
.search{
    width: 750/@rem;
    height: 70/@rem;
    position: relative;
}
.search-container{
    width: 100%;
    height: 70/@rem;
    box-sizing: border-box;
    padding: 0 20/@rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    .brand-logo{
        height: 40/@rem;
        width: 100/@rem;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        img{
            width: 100/@rem;
        }
    }
    .search-box{
        width: 540/@rem;
        height: 58/@rem;
        box-sizing: border-box;
        border:2/@rem solid #eeeeee;
        border-radius: 16/@rem;
        display: flex;
        align-items: center;
        background: #fff;
        img{
            height: 26/@rem;
            width: 26/@rem;
            margin: 0 20/@rem;
        }
        input{
            width: 100%;
            outline: none;
            border: none;
        }
    }
}
</style>
